<html>
<head>
	<title>ACIS Working Group Series</title>

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
	<!-- <link href="./javascript/jquery/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" media="all" /> -->
	
	<style type="text/css">
	* {
		font-family: Verdana;
		sans-serif;
	}
	
	body {
		font: 1em "Trebuchet MS", verdana, arial, sans-serif;
		font-size: 100%;
	}
	
	input,textarea {
		font-family: Arial;
		font-size: 125%;
		padding: 7px;
	}
	
	label {
		display: block;
	}
	
	.empty {
		width: 50px;
	}
	
	.fg-button {
		outline: 0;
		width: 350px;
		font-size: 17pt;
		text-decoration: none !important;
		cursor: pointer;
		position: relative;
		text-align: center;
		zoom: 1;
	}
	
	#bar {
		top: 0;
		right: 0;
		left: 0;
		font-size: 10pt;
		text-align: right;
		vertical-align: middle;
		background: #000;
		padding: 4px;
		margin: 0px;
		width: 100%;
	}
	
	#loginb,#logoutb {
		color: #fff;
		cursor: pointer;
	}
	
	#dialog-login,#dialog-register {
		font-size: 10pt;
	}
	
	#username {
		color: #bbf;
		font-weight: bold;
	}
	
	.ui-autocomplete-loading {
		background: white url('./media/ui-anim_basic_16x16.gif') right center
			no-repeat;
	}
	</style>
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript" src="./lib/bootstrap/js/bootstrap.min.js"></script>
	<!-- <script type="text/javascript" 	src="./javascript/jquery/ui/jquery-ui-1.8.18.custom.js"></script> -->
	<script type="text/javascript" src="./javascript/jquery/external/jquery.base64.js"></script>
	<script type="text/javascript" src="./javascript/awgs.js"></script>
	<script type="text/javascript" src="./javascript/strophe/strophe.min.js"></script>

	<script type="text/javascript">
		
		var awgs;
		
		function updateUsers() {
			/*
			awgs.getUsers(function(users){
				var ol = $("<ol></ol>").attr({"id":"userlist"});
				for(i in users){
					var usr = users[i];
					var li =  $("<li></li>").append("<span>" + usr.xp + "XP</span> - <span>" + usr.name + "</span>");
					ol.append(li);
				}
				$("#users").html(ol);
			});
			*/
		}
		
		function renderItems(items){
			var itemt = "<table class='table table-bordered'>";
			itemt += "<tr style='text-align:left; background:#ddd;'><th>Id</th><th>Name</th><th>Owner</th><th>Last Update</th><th> </th></tr>"
			for(var i=0;i<items.length;i++){
				var item = items[i];
				
				if(item.owner == awgs.getUser()){
					itemt += "<tr><td><a href='" + item.resource + "'>" + item.id + "</a></td><td>" + item.name + "</td><td><a href='xmpp:" + item.owner + "' title='" +item.owner + "'>" + item.owner + "</a></td><td>" + item.lastupdate.substr(0,19) + "</td><td><button style='font-size:12px;width:60px;height:20px;' class='fg-button ui-state-default ui-corner-all' onclick='deleteItem(\"" + item.id + "\");'>Delete</button><button style='font-size:12px;width:60px;height:20px;' class='fg-button ui-state-default ui-corner-all' onclick='updateItem(\"" + item.id + "\");'>Edit</td></tr>";
				}	else {
					itemt += "<tr><td><a href='" + item.resource + "'>" + item.id + "</a></td><td>" + item.name + "</td><td><a href='xmpp:" + item.owner + "' title='" +item.owner + "'>" + item.owner + "</a></td><td>" + item.lastupdate.substr(0,19) + "</td><td></td></tr>";
				}
			}
			itemt += "</table>";
			return itemt;
		}
		
		function deleteItem(id){
			$("#delete-id").html(id);
			$("#dialog-confirm-delete").dialog("open");
		}
		
		function updateItem(id){
			awgs.getItem(id, function(r){
				console.log(r);
				$("#update-id").html(r.id);
				$("#update-name").val(r.name);
				$("#update-description").val(r.description);
				$("#update-url").val(r.url);
				$("#update-type-id").val(r.type.id);
				$("#update-type").val(r.type.name);
				$("#dialog-update").dialog("open");
			});
			
		}
		
		function updateItems() {
			console.log("Items listing request");
			if($("search").val() == ""){
				awgs.getItems(function(items){
					var ri = renderItems(items)
					$("#items").html(ri);
				});
			} else {
				awgs.searchItems($("#search").val(),function(items){
					var ri = renderItems(items);
					$("#items").html(ri);
				});
			}
		}
		
		function updateStatus(){
			if(awgs.authenticated()){
				$("#username").html(awgs.getUser());
				$("#loginb").hide();
				$("#logoutb").show();
				$("#registerb").show();
				
			} else {
				$("#username").html("");
				$("#loginb").show();
				$("#logoutb").hide();
				$("#registerb").hide();
			}
		}
		
		function resetRegistration(){
			$("#register-name").val("");
			$("#register-description").val("");
			$("#register-url").val("");
			$("#register-type").val("");
			$("#register-type-id").val("");
		}
		
		function init() {
			
			console.log(window.location);
			console.log(window.location.pathname);
			
			awgs = new AwgsClient(window.location.href + "resources/");
			
			// load all users and display in a list
			updateStatus();
			updateUsers();
			updateItems();
			
			// Twitter Bootstrap Implementation
			
			$("#modal-login").modal({
				show: false
			});
			
			// JQuery UI implementation
			
			/*
			$( "#loginb").click(function() {
				$("#dialog-login").dialog("open");
			});
			
			$("#dialog-login").dialog({
				autoOpen: false,
				height: 300,
				width: 460,
				modal: true,
				buttons: {
					"Login": function() {
						var that = $(this);
						awgs.authenticate(
							$("#login-login").val(),
							$("#login-password").val(),
							function(result){
								if(result){
									that.dialog("close");
									updateStatus();
									updateItems();
								}
							});
					},
					Cancel: function() {
						$(this).dialog("close");
					}
				}
			});
			
			$( "#logoutb" ).click(function() {
				awgs.logout();
				updateStatus();
				updateItems();
			});
			
			$( "#registerb" ).button().click(function() {
				awgs.getNextId(function(id){
					console.log("New Id is " +id);
					$("#newid").html(id);
				});
				$( "#dialog-register" ).dialog("open");
			});
			
			$("#search").keyup(function(event){
				var q = $("#search").val();
				if(q.length > 1){
					updateItems();
				}
			});
			
			$("#register-type").autocomplete({source: function(req,resp){
				awgs.searchItemTypes(req.term,function(result){
					if(result.length == 0){
						$( "#register-type-id" ).val("");
					}
					var mres = new Array();
					for(var i=0; i<result.length; i++){
						var t = result[i];
						var mt = {label: t.name, value: t.id};
						mres.push(mt);
					}
					resp(mres);
				});
				
			},
			minLength: 2,
			select: function(event, ui){
				$( "#register-type" ).val( ui.item.label );
				$( "#register-type-id" ).val( ui.item.value );
				return false;
			},
			focus: function( event, ui ) {
				$( "#register-type" ).val( ui.item.label );
				return false;
			},
			});
			
			$("#update-type").autocomplete({source: function(req,resp){
				awgs.searchItemTypes(req.term,function(result){
					if(result.length == 0){
						$( "#update-type-id" ).val("");
					}
					var mres = new Array();
					for(var i=0; i<result.length; i++){
						var t = result[i];
						var mt = {label: t.name, value: t.id};
						mres.push(mt);
					}
					resp(mres);
				});
				
			},
			minLength: 2,
			select: function(event, ui){
				$( "#update-type" ).val( ui.item.label );
				$( "#update-type-id" ).val( ui.item.value );
				return false;
			},
			focus: function( event, ui ) {
				$( "#update-type" ).val( ui.item.label );
				return false;
			},
			});
			
			$("#dialog-confirm-delete").dialog({
				autoOpen: false,
				//height: 500,
				width: 460,
				modal: true,
				buttons: {
					"Delete": function() {
						
						awgs.deleteItem($("#delete-id").html(), function(r){
							console.log(r);
							if (r.status == "success"){
								console.log("deleted successfully");
								updateItems();
							}
						});
						$(this).dialog("close");
					},
					"Cancel": function() {
						$(this).dialog("close");
					}
				}});
			
			$("#dialog-register").dialog({
				autoOpen: false,
				//height: 500,
				width: 600,
				modal: true,
				buttons: {
					"Register": function() {
						var that = $(this);
						var doit = true;
						
						if($("#register-name").val() == ""){
							doit = false;
							$("#register-error").html("Please specify a document name.");
						}
						
						if($("#register-description").val() == ""){
							doit = false;
							$("#register-error").html("Please specify a document description.");
						}
						
						if($("#register-url").val() == ""){
							doit = false;
							$("#register-error").html("Please specify document resource URL.");
						}
						
						
						if($("#register-type").val() == "" && $("#register-type-id").val() == ""){
							doit = false;
							$("#register-error").html("Please specify valid document type.");
						}
			
						//this is the case, when the chosen type has not been defined before.
						if($("#register-type").val() != "" && $("#register-type-id").val() == ""){
							doit = false;
							$("#register-type-name").val($("#register-type").val());
							$("#register-type-note").html("Item type " + $("#register-type").val() + " does not exist yet. Do you want to register as new item type?");
							
							$("#dialog-register-type").dialog("open");
						}
						
						if(doit){
							var item = {
									name: $("#register-name").val(),
								  description: $("#register-description").val(),
								  url: $("#register-url").val(),
								  type: $("#register-type-id").val()
							};
							
							awgs.createItem(item,function(result){
								console.log(result);
								if(result.status=="conflict"){
									$("#register-error").html("Document resource URL already registered!");
								}
								else if(result.status=="success"){
									updateItems();
									that.dialog("close");
								}
							});
						}
					},
					Cancel: function() {
						$(this).dialog("close");
					}
				}
			});
			
			$("#dialog-update").dialog({
				autoOpen: false,
				//height: 500,
				width: 600,
				modal: true,
				buttons: {
					"Update": function() {
						var that = $(this);
						var doit = true;
						
						if($("#update-name").val() == ""){
							doit = false;
							$("#update-error").html("Please specify a document name.");
						}
						
						if($("#update-description").val() == ""){
							doit = false;
							$("#update-error").html("Please specify a document description.");
						}
						
						if($("#update-url").val() == ""){
							doit = false;
							$("#update-error").html("Please specify document resource URL.");
						}
						
						
						if($("#update-type").val() == "" && $("#update-type-id").val() == ""){
							doit = false;
							$("#update-error").html("Please specify valid document type.");
						}
			
						//this is the case, when the chosen type has not been defined before.
						if($("#update-type").val() != "" && $("#update-type-id").val() == ""){
							doit = false;
							$("#register-type-name").val($("#update-type").val());
							$("#register-type-note").html("Item type " + $("#update-type").val() + " does not exist yet. Do you want to register as new item type?");
							
							$("#dialog-register-type").dialog("open");
						}
						
						if(doit){
							var item = {
									name: $("#update-name").val(),
								  description: $("#update-description").val(),
								  url: $("#update-url").val(),
								  type: $("#update-type-id").val()
							};
							
							awgs.updateItem($("#update-id").html(),item,function(result){
								console.log(result);
								if(result.status=="conflict"){
									$("#register-error").html("Document resource URL already registered!");
								}
								else if(result.status=="success"){
									updateItems();
									that.dialog("close");
								}
							});
						}
					},
					Cancel: function() {
						$(this).dialog("close");
					}
				}
			});
			
			$("#dialog-register-type").dialog({
				autoOpen: false,
				//height: 500,
				width: 550,
				modal: true,
				buttons: {
					"Register": function() {
						var that = $(this);
						var doit = true;
						
						if($("#register-type-name").val() == ""){
							doit = false;
							$("#register-error").html("Please specify an item type name.");
						}
						
						if($("#register-type-desc").val() == ""){
							doit = false;
							$("#register-error").html("Please specify an item type description.");
						}
						
						if(doit){
							var item = {
									name: $("#register-type-name").val(),
								  description: $("#register-type-desc").val()
							};
							
							awgs.createItemType(item,function(result){
								console.log(result);
								if(result.status=="conflict"){
									console.log("Conflict detected");
									$("#register-type-error").html("Item type already registered!");
								}
								else if(result.status=="success"){
									console.log("Created item type " + result);
									console.log(result);
									$("#register-type-id").val(result.data.id);
									$("#register-type").val(result.data.name);
									$("#update-type-id").val(result.data.id);
									$("#update-type").val(result.data.name);
									
									that.dialog("close");
									$("#register-type-note").html("");
								}
							});
						}
					},
					Cancel: function() {
						$(this).dialog("close");
						$("#register-type-note").html("");
					}
				}
			});
			*/
		}
		
		$(document).ready(init);
		
	</script>
	
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-38649683-1']);
		_gaq.push(['_trackPageview']);
		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
</head>

<body>
	<div id="bar">
		<span id="username"></span> <span class="empty"></span> <span
			id="loginb" class="ui-button-text">Login</span> <span id="logoutb"
			class="ui-button-text">Logout</span>
	</div>

	<div id="main">
		<h2>The ACIS Working Group Series</h2>

		A service for managing the ACIS Working Group Series, a series of
		working papers created by members of the ACIS working group at Chair
		of Computer Science 5 - Databases &amp; Information Systems, RWTH
		Aachen University, Germany. <br /> <br />

		<div class="ui-widget">
			<label for="search">Search: </label> <input id="search" type="text"
				value="" size="50"/> <span id="profile-buttons">
				<button id="registerb"
					class="fg-button ui-state-default ui-corner-all">Register
					new AWGS ID</button>
			</span>
		</div>

		<br />

		<div id="items"></div>

		<div id="users"></div>

	</div>
	
	<div id="modal-login" class="modal hide fade in" style="display:none;">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">x</a>
			<h3>Login</h3>
		</div>
		<div class="modal-body">
			<form class="form-horizontal">
			  <div class="control-group">
			    <label class="control-label" for="login-jid">Jabber ID</label>
			    <div class="controls">
			      <input type="text" id="login-jid" placeholder="myself@myjabberserver.com">
			    </div>
			  </div>
			  <div class="control-group">
			    <label class="control-label" for="login-pw">Password</label>
			    <div class="controls">
			      <input type="password" id="login-pw" placeholder="Password">
			    </div>
			  </div>
			</form>
		</div>
		<div class="modal-footer">  
			<a href="#" class="btn btn-success">Login</a>  
			<a href="#" class="btn" data-dismiss="modal">Cancel</a>  
		</div>  
	</div>
	
	<!-- 
	<div id="dialog-login" title="Login">
		<form>
			<fieldset>
				<label for="login-login">JID:</label> <input type="text"
					id="login-login" value="" size="50"
					class="text ui-widget-content ui-corner-all" /><br /> <label
					for="login-password">Password:</label> <input type="password"
					id="login-password" size="50" value=""
					class="text ui-widget-content ui-corner-all" /><br />
			</fieldset>
		</form>
	</div>
	
	<div id="dialog-confirm-delete" title="Confirm Deletion">
		Do you really want to delete <span id="delete-id"></span>?
	</div>
	
	<div id="dialog-register-type" title="Register AWGS Item Type">
		<span id="register-type-note"></span>
		<form>
			<fieldset>
				<label for="register-type-name">Name:</label> <input type="text"
					id="register-type-name" value="" size="50"
					class="text ui-widget-content ui-corner-all" /><br /> <label
					for="register-type-desc">Description:</label> <input type="text"
					id="register-type-desc" size="50" value=""
					class="text ui-widget-content ui-corner-all" /><br />
			</fieldset>
		</form>
		<span id="register-type-error"></span>
	</div>

	<div id="dialog-register" title="Register AWGS ID">
		Register ACIS Working Group Series ID <span id="newid"></span>.
		<form>
			<fieldset>
				<label for="">Name:</label> <input type="text" id="register-name"
					value="" size="50" class="text ui-widget-content ui-corner-all" /><br />
				<label for="register-description">Description:</label>
				<textarea id="register-description"
					class="text ui-widget-content ui-corner-all"></textarea>
				<br /> <label for="register-url">URL:</label> <input type="text"
					id="register-url" value="" size="50"
					class="text ui-widget-content ui-corner-all" /><br/>  
					
				<div class="ui-widget">
					<label for="register-type">Type:</label>
					<input type="text" id="register-type" />
					<input type="hidden" id="register-type-id" />
					
				</div>
					<!--
					<select id="register-type"
					name="register-type" size="1"
					class="ui-widget-content ui-corner-all">
						<option value="1">Valid</option>
						<option value="100">Invalid</option>
					</select>
					-->
			</fieldset>
		</form>
		<span id="register-error"></span>
	</div>
	
	<div id="dialog-update" title="Update AWGS Item">
		Update AWGS Item <span id="update-id"></span>.
		<form>
			<fieldset>
				<label for="">Name:</label> <input type="text" id="update-name"
					value="" size="50" class="text ui-widget-content ui-corner-all" /><br />
				<label for="update-description">Description:</label>
				<textarea id="update-description"
					class="text ui-widget-content ui-corner-all"></textarea>
				<br /> <label for="update-url">URL:</label> <input type="text"
					id="update-url" value="" size="50"
					class="text ui-widget-content ui-corner-all" /><br/>  
					
				<div class="ui-widget">
					<label for="update-type">Type:</label>
					<input type="text" id="update-type" />
					<input type="hidden" id="update-type-id" />	
				</div>
			</fieldset>
		</form>
		<span id="update-error"></span>
	</div>

</body>
</html>
